<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>

<body>
    <ul>

    </ul>
</body>
<!-- <script>
    function getData(res) {
        console.log(res);
    }
</script>
<script src="http://127.0.0.1/index.php?call=getData"></script> -->
<script>

    // 拿出电话  初始化ajax 对象并存储
    let xhr = new XMLHttpRequest()

    // 输入号码  设置请求方式和地址
    xhr.open("GET", "http://127.0.0.1/index.php")

    // 拨号 发送ajax请求(http请求)
    xhr.send()


    // let res = await fetch("http://127.0.0.1:3000/api/json/index", {
    //     data: {}
    // })
    // fetch("http://127.0.0.1:3000/api/json/index")
    // .then(res => res.json())
    // .then(res => {
    //     console.log(res);
    // })

    xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                let data = JSON.parse(xhr.response)
                console.log(data);

                // data.result.list.forEach(v => {
                //     $("ul").innerHTML += `
                //     <li>
                //         <p>${v.title}</p>
                //         <img src="${v.img_src}" alt="">
                //     </li>
                //     `
                // });
            } else {
                console.error(xhr);
                throw new Error("请求失败") 
            }
        }
    }

    // fetch("http://127.0.0.1:3000/api/json/index")
    // .then(res => res.json())
    // .then(res => {
    //     console.log(res);
    // })

    function $(className) {
        return document.querySelector(className);
    }

  // GET 和 POST 请求有什么差别
  // https://www.php.cn/faq/500696.html

  // HTTP 协议
  // https://www.cnblogs.com/coderwhytop/p/14769174.html

  // GET  找服务器要资源
  // POST 给服务器要资源
  // PUT  给服务器要资源（更新的过程）
  // DELETE 给服务器要资源（删除的过程）

</script>

</html>